<template>
  <div class="about">
   
       
            <div class="navtitle">
                <ul>
                    <li class="con"><a href="#">全部</a></li>
                    <li><a href="#">自然</a></li>
                    <li><a href="#">城市</a></li>
                    <li><a href="#">运动</a></li>
                    <li><a href="#">人物</a></li>
                    <li><a href="#">签约摄影师</a></li>
                    
                </ul>
            </div>

        
        <hr>    
        
        <div class="main" ref="main" v-if="Lists">
            <div class="container">
                <div class="box">
                    <div class="content" @click="todetails(item.slug)" ref="waterfallItem" v-for="item in Lists" :key="item.slug">
                        <div class="imgbox">
                            <img :src="item.image.large" alt="">                    
                        </div>
                        <div class="boxmain">
                           <div class="user">
                            <p>{{item.title}}</p>
                            <div class="usermain">
                                <div class="useimg">
                                    <div class="headimg">
                                        <img class="auto-img" :src="item.user.avatar.large" alt="">
                                    </div>
                                    <p style="margin-left:10px;">{{item.user.name}}</p>
                                </div>
                                <div class="state">
                                    <div class="icon">
                                        <img src="../assets/img/goodw.png" alt="" class="auto-img">
                                    </div>
                                    <p>{{item.like_count}}</p>
                                    <div class="icon">
                                        <img src="../assets/img/news.png" alt="" class="auto-img">
                                    </div>
                                    <p>0</p>
                                </div>
                            </div>
                        </div> 
                        </div>
                        
                    </div>
                    <!-- <div class="content">
                        <div class="imgbox">
                            <img src="../assets/img/ia_600000157.jpg" alt="">
                        </div>
                        <div class="boxmain">
                        <div class="user">
                            <p>Osmo Action 3 - 总想要透过你的眼睛</p>
                            <div class="usermain">
                                <div class="useimg">
                                    <div class="headimg">
                                        <img class="auto-img" src="../assets/img/ia_300000345.jpg" alt="">
                                    </div>
                                    <p style="margin-left:10px;">朱翠胜</p>
                                </div>
                                <div class="state">
                                    <div class="icon">
                                        <img src="../assets/img/goodw.png" alt="" class="auto-img">
                                    </div>
                                    <p>54</p>
                                    <div class="icon">
                                        <img src="../assets/img/news.png" alt="" class="auto-img">
                                    </div>
                                    <p>0</p>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="imgbox">
                            <img src="../assets/img/ia_600000179.jpg" alt="">
                        </div>
                        <div class="boxmain">
                        <div class="user">
                            <p>Osmo Action 3 - 总想要透过你的眼睛</p>
                            <div class="usermain">
                                <div class="useimg">
                                    <div class="headimg">
                                        <img class="auto-img" src="../assets/img/ia_300000345.jpg" alt="">
                                    </div>
                                    <p style="margin-left:10px;">朱翠胜</p>
                                </div>
                                <div class="state">
                                    <div class="icon">
                                        <img src="../assets/img/goodw.png" alt="" class="auto-img">
                                    </div>
                                    <p>54</p>
                                    <div class="icon">
                                        <img src="../assets/img/news.png" alt="" class="auto-img">
                                    </div>
                                    <p>0</p>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="imgbox">
                            <img src="../assets/img/ia_600000138.jpg" alt="">
                        </div>
                        <div class="boxmain">
                        <div class="user">
                            <p>Osmo Action 3 - 总想要透过你的眼睛</p>
                            <div class="usermain">
                                <div class="useimg">
                                    <div class="headimg">
                                        <img class="auto-img" src="../assets/img/ia_300000345.jpg" alt="">
                                    </div>
                                    <p style="margin-left:10px;">朱翠胜</p>
                                </div>
                                <div class="state">
                                    <div class="icon">
                                        <img src="../assets/img/goodw.png" alt="" class="auto-img">
                                    </div>
                                    <p>54</p>
                                    <div class="icon">
                                        <img src="../assets/img/news.png" alt="" class="auto-img">
                                    </div>
                                    <p>0</p>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>                    
                    <div class="content">
                        <div class="imgbox">
                            <img src="../assets/img/ia_600000176.jpg" alt="">
                        </div>
                        <div class="boxmain">
                        <div class="user">
                            <p>Osmo Action 3 - 总想要透过你的眼睛</p>
                            <div class="usermain">
                                <div class="useimg">
                                    <div class="headimg">
                                        <img class="auto-img" src="../assets/img/ia_300000345.jpg" alt="">
                                    </div>
                                    <p style="margin-left:10px;">朱翠胜</p>
                                </div>
                                <div class="state">
                                    <div class="icon">
                                        <img src="../assets/img/goodw.png" alt="" class="auto-img">
                                    </div>
                                    <p>54</p>
                                    <div class="icon">
                                        <img src="../assets/img/news.png" alt="" class="auto-img">
                                    </div>
                                    <p>0</p>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>   
                    <div class="content">
                        <div class="imgbox">
                            <img src="../assets/img/ia_600000160.jpg" alt="">
                        </div>
                        <div class="boxmain">
                        <div class="user">
                            <p>Osmo Action 3 - 总想要透过你的眼睛</p>
                            <div class="usermain">
                                <div class="useimg">
                                    <div class="headimg">
                                        <img class="auto-img" src="../assets/img/ia_300000345.jpg" alt="">
                                    </div>
                                    <p style="margin-left:10px;">朱翠胜</p>
                                </div>
                                <div class="state">
                                    <div class="icon">
                                        <img src="../assets/img/goodw.png" alt="" class="auto-img">
                                    </div>
                                    <p>54</p>
                                    <div class="icon">
                                        <img src="../assets/img/news.png" alt="" class="auto-img">
                                    </div>
                                    <p>0</p>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>                       
                    <div class="content">
                        <div class="imgbox">
                            <img src="../assets/img/ia_600000148.jpg" alt="">
                        </div>
                        <div class="boxmain">
                        <div class="user">
                            <p>Osmo Action 3 - 总想要透过你的眼睛</p>
                            <div class="usermain">
                                <div class="useimg">
                                    <div class="headimg">
                                        <img class="auto-img" src="../assets/img/ia_300000345.jpg" alt="">
                                    </div>
                                    <p style="margin-left:10px;">朱翠胜</p>
                                </div>
                                <div class="state">
                                    <div class="icon">
                                        <img src="../assets/img/goodw.png" alt="" class="auto-img">
                                    </div>
                                    <p>54</p>
                                    <div class="icon">
                                        <img src="../assets/img/news.png" alt="" class="auto-img">
                                    </div>
                                    <p>0</p>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="imgbox">
                            <img src="../assets/img/ia_600000154.jpg" alt="">
                        </div>
                        <div class="boxmain">
                        <div class="user">
                            <p>Osmo Action 3 - 总想要透过你的眼睛</p>
                            <div class="usermain">
                                <div class="useimg">
                                    <div class="headimg">
                                        <img class="auto-img" src="../assets/img/ia_300000345.jpg" alt="">
                                    </div>
                                    <p style="margin-left:10px;">朱翠胜</p>
                                </div>
                                <div class="state">
                                    <div class="icon">
                                        <img src="../assets/img/goodw.png" alt="" class="auto-img">
                                    </div>
                                    <p>54</p>
                                    <div class="icon">
                                        <img src="../assets/img/news.png" alt="" class="auto-img">
                                    </div>
                                    <p>0</p>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="imgbox">
                            <img src="../assets/img/ia_600000157.jpg" alt="">
                        </div>
                        <div class="boxmain">
                        <div class="user">
                            <p>Osmo Action 3 - 总想要透过你的眼睛</p>
                            <div class="usermain">
                                <div class="useimg">
                                    <div class="headimg">
                                        <img class="auto-img" src="../assets/img/ia_300000345.jpg" alt="">
                                    </div>
                                    <p style="margin-left:10px;">朱翠胜</p>
                                </div>
                                <div class="state">
                                    <div class="icon">
                                        <img src="../assets/img/goodw.png" alt="" class="auto-img">
                                    </div>
                                    <p>54</p>
                                    <div class="icon">
                                        <img src="../assets/img/news.png" alt="" class="auto-img">
                                    </div>
                                    <p>0</p>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>  -->
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <foot-navbar></foot-navbar>
    </div>
</template>

<script>
// import HeadNavbar from '../components/HeadNavbar.vue'
import FootNavbar from '../components/FootNavbar.vue'
import { getLists } from '../api/lists'
export default {
    components:{FootNavbar},
    data() {
        return {
            Lists: null,
            array: [], //定义空数组存储元素高度
            height:[],//最大高度
            endindex:0,//最后一个元素的下标
            Bigheight:0,
        };
    },
    methods:{
        // 跳转到详情页
        todetails(id){
            this.$router.push("/details?id="+ id +"");
        },
        //瀑布流
        getWaterfall() {
            let columns = 3; //定义布局的列数为2
            let item = this.$refs.waterfallItem; //获取每个子元素的DOM
            console.log("item",item)
            for (let i = 0; i < item.length; i++) {
                //遍历整个子元素的DOM集合
                if (i < columns) {
                //小于columns的子元素作为第一行
                item[i].style.top = 20 + 'px';
                item[i].style.left = item[0].clientWidth * i + "px";
                console.log("offsetWidth", item[0].clientHeight)
                this.array.push(item[i].clientHeight); //遍历结束时，数组this.array保存的是第一行子元素的元素高度
                
                console.log("this.array",this.array)
                } else {
                    //大于等于columns的子元素将作其他行
                let minHeight = Math.min(...this.array); //  找到第一列的最小高度
                let index = this.array.findIndex(item => item === minHeight) // 找到最小高度的索引
                //设置当前子元素项的位置
                item[i].style.top = this.array[index] +25+ "px"; 
                item[i].style.left = item[index].offsetLeft + "px";
                //重新定义数组最小项的高度 进行累加
                this.array[index]+= item[i].clientHeight;
                //最大高度
                this.height.push(this.array[index]);
                console.log("this.array[index]",this.array[index])
                }
            }
                this.endindex=this.height.length-1;
                this.Bigheight=this.height[this.endindex];
                this.$refs.main.style.height=(this.Bigheight+50+'px')
        },
        getListsFun(){
            getLists().then(data=>{
                //列表数据
                this.Lists=data.data.items;
                // 给每个数据添加新数据  
                for(let i=0;i<this.Lists.length;i++){
                    // 点赞状态goods
                    this.Lists[i].goods=0;
                    // 收藏collect
                    this.Lists[i].collect=false;
                    // 关注状态
                    this.Lists[i].care=false;
                }
                if(window.localStorage.getItem("Listsnew")){
                    this.Lists=JSON.parse(window.localStorage.getItem("Listsnew"))[0];
                }
            })
        },
    },
    created(){
        this.getListsFun();
        setTimeout(() => { // 防止图片高度没有加载出来
            this.getWaterfall();
        },50)
    },
    mounted(){
         
    }
}
</script>
<style lang="scss" scoped>
.about {
  .navtitle {
    width: 100%;
    background-color: #fff;
    position: sticky;
    top: 60px;
    left: 0;
    z-index: 10;
    box-shadow: 0 1px 1px #eee;
    ul {
      display: flex;
      justify-content: center;
      li {
        display: flex;
        align-items: center;
        height: 60px;
        font-weight: bold;
        font-size: 14px;
        margin: 0 15px;
        a {
          color: #999;
          &:hover {
            color: #1088f2;
          }
        }
        &.con {
          border-bottom: 2px solid #1088f2;
          a {
            color: #000;
          }
        }
      }
    }
  }
  .main {
    padding-top: 20px;
    background-color: #f7f8f9;
    .container{
        position: relative;
    }
    .box {
    
    overflow: hidden;
      .content {
        cursor: pointer;
        width: 33%;
        height: auto;
        padding: 10px;
        margin: 0 0 10px 0;
        box-sizing: border-box;
        overflow: hidden;
        // margin-right: 5px;
        position: absolute;
        &:nth-child(3n){
            margin-right: 0;
        }
        .imgbox {
            overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            // display: block;
          }
        }
      }
    }
    .content {
    //   position: relative;
    z-index: 1;
      overflow: hidden;
      margin-bottom: 16px;
      &:hover {
        .boxmain {
            transition: all 0.2s linear;
            opacity: 1;
        }
      }
      .imgbox{
        position: relative;
      }
      .boxmain{
        opacity: 0;
        .user {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background-image: linear-gradient(-180deg, transparent 0%, rgba(0, 0, 0, 0.6) 97%);
        padding: 16px;
        width: 95%;
        height: 95%;
        box-sizing: border-box;
        position: absolute;
        bottom: 14px;
        // left: -387px;
        left: 10px;
        p {
          font-size: 14px;
          font-weight: bold;
          color: #fff;
          margin-bottom: 10px;
        }
        .usermain {
          p {
            margin-bottom: 0;
          }
        }
      }
      }
      
    }
    .usermain {
      display: flex;
      justify-content: space-between;
      .headimg {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        overflow: hidden;
      }
      .useimg {
        display: flex;
        align-items: center;
      }
      .state {
        display: flex;
        align-items: center;
        .icon {
          width: 16px;
          height: 16px;
          margin-right: 5px;
          margin-left: 10px;
          margin-top: -3px;
        }
      }
    }
  }
}
/* 瀑布流布局 */

</style>